@import url(base.css);

html {
  background: rgba(0, 0, 0, 0);
  border: window-frame-width solid color(accent-color);
  padding-top: 28dip;
}
@media win7 {
  html {
    border-width: 2px;
    background: rgba(255, 255, 255, 0.8);
  }
}
html > header {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 28dip;
  flow: horizontal;
  height: 28dip;
  margin: 0;
  font-family: inherit;
  font-size: 12dip;
  font-weight: 600;
}
html > header.overlay {
  left: *;
}
html > header.shade {
  background: morph(color(accent-color), opacity: 10%);
}
window-caption {
  display: block;
  line-height: 28dip;
  width: *;
  color: rgba(0, 0, 0, 0.5);
  padding: 0 1em;
}
html:owns-focus window-caption {
  color: black;
}
window-buttons {
  display: block;
  flow: horizontal;
  width: max-content;
  height: 2em;
}
window-buttons > window-button {
  behavior: clickable;
  display: block;
  height: 28dip;
  width: 48dip;
  foreground-size: 10dip;
  foreground-repeat: no-repeat;
  foreground-position: 50% 50%;
  fill: none;
  stroke: black;
  stroke-width: 1.1dip;
  transition: background-color linear 100ms, color linear 100ms;
}

window-buttons > window-button:hover {
  background: morph(color(accent-color), opacity: 50%);
}
window-buttons > window-button[role="window-settings"] {
  foreground-image: url(path: M5 6 L6 6 L6 5 L4 3 L4 1 L3 0 L2 0 L1.5 0.5 L2.5 1.5 L2.5 2.5 L1.5 2.5 L0.5 1.5 L0 2 L0 3 L1 4 L3 4 Z);
}
window-buttons > window-button[role="window-close"] {
  foreground-image: url(path: M0 0 L10 10 M10 0 L0 10);
}
window-buttons > window-button[role="window-close"]:hover {
  background: rgb(232,17,35);
  stroke: white;
}
window-buttons > window-button[role="window-maximize"] {
  foreground-image: url(path: M0 0 H9 V9 H0 Z);
}
html[state="maximized"] > header > window-buttons > window-button[role="window-maximize"] {
  foreground-image: url(path: M0 2 h8 v8 h-8 Z M2 2 v-2 h8 v8 h-2);
}
window-buttons > window-button[role="window-minimize"] {
  foreground-image: url(path: M0 0 M0 4.5 H9 M9 9);
}